<html>
    <head>
        {foreach item=sd from=$seldest}

            {assign var='curselection' value=$sd.country}
            {assign var='color1' value=$sd.color1}
            {assign var='color2' value=$sd.color2}
        {/foreach}

        {foreach item=p from=$package}
            {assign var='pck' value=$p}
        {/foreach}

        {assign var='cou' value=1}
        
        <title>{$title|default:"no title"}</title>

        {literal}
            <link href="css/fontstyle.css" rel="stylesheet" type="text/css" charset="utf-8" />
            <link href="css/style.css" rel="stylesheet" type="text/css" />
            <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
            <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
            

            <style type="text/css">                
                * {
                    padding:0; margin:0;
                }

                p, h3 {
                    margin-bottom:15px;
                }

                .tabcontent {
                    padding:10px;
                    width:90%;
                }

                .tabs li {
                    list-style: none;
                    display: inline;                    
                }

                .tabs a {
                    text-decoration: none;
                }

                .tabs a.active {
                    background-image: url('images/package_menu_active_back.png');
                    background-repeat: repeat-x;
                    background-position: top center;
                    display: inline-block;
                    text-decoration: none;

                }
                a:visited {

                    text-decoration: none;
                    color: #0e5763;
                }
                .tab_separator {                    
                    background-image: url('images/package_menu_separator.png');
                    background-repeat: no-repeat;
                    display: inline-block;
                    height: 57px;
                    width: 3px;
                    margin-top: 5px;
                    z-index: 999;
                    margin-left: -9px;
                }

                .roundedbox {
                    background-image: url('images/package_menu_back.png');
                    background-repeat: repeat-x;
                    display: inline-block;
                    font-size: 14px;
                    font-weight: bold;                    
                    text-align: center;
                    vertical-align: top;
                    color: #0e5763;
                    text-decoration:none;
                    padding-left: 15px;
                    padding-right: 15px;
                    padding-top: 18px;
                    padding-bottom: 20px;
                    z-index:-1;
                }
                
                #taboverview,                 
                #tabitinerary,
                #tabdates,
                #tab_separator,
                #tabtravel,
                #tab_separator,
                #tabquestion {
                    height: 350px;
                    overflow: hidden;
                }
                
                #itineraryscroll {
                position: absolute;
                }
            </style>
            <script src="js/jquery-1.7.2.min.js"></script>
            <script src="js/jquery.corner.js"></script>
            
            <script type="text/javascript" src="js/gettheme.js"></script>

            <script type="text/javascript" src="js/jqxcore.js"></script>
            <script type="text/javascript" src="js/jqxbuttons.js"></script>
            <script type="text/javascript" src="js/jqxscrollbar.js"></script>
            <script type="text/javascript" src="js/jqxlistbox.js"></script>
            <script type="text/javascript" src="js/jqxdropdownlist.js"></script>

            <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
            <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
            
            <script language="javascript" type="text/javascript">
                // Wait until the DOM has loaded before querying the document
                $(document).ready(function(){
                    
                    $('#leftmenucorner').corner();
                    $('#rightmenucorner').corner();
                        
                    $('ul.tabs').each(function(){
                        // For each set of tabs, we want to keep track of
                        // which tab is active and it's associated content
                        var $active, $content, $links = $(this).find('a');

                        // Use the first link as the initial active tab
                        $active = $links.first().addClass('active');
                        $content = $($active.attr('href'));

                        // Hide the remaining content
                        $links.not(':first').each(function () {
                            $($(this).attr('href')).hide();
                        });

                        // Bind the click event handler
                        $(this).on('click', 'a', function(e){
                            // Make the old tab inactive.
                            $active.removeClass('active');
                            $content.hide();

                            // Update the variables with the new link and content
                            $active = $(this);
                            $content = $($(this).attr('href'));

                            // Make the tab active.
                            $active.addClass('active');
                            $content.show();

                            // Prevent the anchor's default click action
                            e.preventDefault();
                        });
                    });
                        
                        
                        
                    // Create jqxScrollBar
                    var theme = getTheme();
                    $("#itineraryscroll").jqxScrollBar({ 
                            width: 18, 
                            height: $("#tabitinerary").height()-100, 
                            min: 0, 
                            max: $("#tabitinerary").height(), 
                            vertical: true, 
                            theme: theme });

                    // Trigger the 'valuechanged' event.
                    $("#itineraryscroll").bind('valuechanged', function (event) {
                        $("#tabitinerary").scrollTop(parseInt(event.currentValue));
                    });
                        
                        
                });
            </script>

        {/literal}
    </head>
    <body id="packages" onload="initpage();">

        {include file='header.tpl'}

        <div id="container_breadcrumb">
            Home > Our Packages > {$curselection} >
        </div>

        <div id="container_package">
            <input type="hidden" id="selectedpackage" />
            <input type="hidden" id="selectedsort" />

            <table border="0"
                   width="100%"
                   cellspacing="0"
                   cellpadding="0">
                <tr valign="top">
                    <td width="25%" valign="top">
                        <div id="leftframetitle">
                            <span class="red_color">OUR</span><span class="black_color">PACKAGES</span>
                        </div>

                        {foreach item=d from=$dest}
                            <div id="leftframecontent">
                                <img class="packagebutton" src="{$d.button_img}" />

                                <a href="packagecategory.php?id={$d.id}&s=">
                                    <div class="packagelink">
                                        {$d.country|upper}
                                    </div>
                                </a>

                            </div>
                        {/foreach}
                    </td>
                    <td>
                        <div id="rightframecontent">
                            <div id="packagesbox">
                                <!-- <div id="leftmenucorner" class="leftrounded" data-corner="left 12px"></div> -->
                                <ul class='tabs'>
                                    <li>
                                        <a href='#taboverview' 
                                           id="leftmenucorner" 
                                           class="roundedbox" 
                                           data-corner="left 12px">OVERVIEW
                                        </a>
                                    </li>

                                    <div class="tab_separator"></div>

                                    <li>
                                        <a href='#tabitinerary' class="roundedbox">ITINERARY</a>
                                    </li>

                                    <div class="tab_separator"></div>

                                    <li>
                                        <a href='#tabdates' class="roundedbox">DATES & PRICES</a>
                                    </li>

                                    <div class="tab_separator"></div>

                                    <li>
                                        <a href='#tabtravel' class="roundedbox">TRAVEL DOCUMENT</a>
                                    </li>

                                    <div class="tab_separator"></div>

                                    <li>
                                        <a href='#tabquestion'
                                           id="rightmenucorner" 
                                           class="roundedbox"
                                           data-corner="right 12px">ASK QUESTION
                                        </a>
                                    </li>
                                </ul>


                                <div id='taboverview' class="tabcontent">
                                    <div class="pack_ov_title">{$pck.ov_title}</div>

                                    <div class="pack_ov_title">PERIOD</div>
                                    <div class="pack_ov_text">{$pck.ov_period}</div>

                                    <div class="pack_ov_title">BONUS</div>
                                    <div class="pack_ov_text">{$pck.ov_bonus}</div>

                                    <div class="pack_ov_title">HIGHLIGHT</div>
                                    <div class="pack_ov_text">{$pck.ov_highlight|html_entity_decode|wordwrap:60}</div>

                                    <div class="pack_ov_title">HAL-HAL PERHATIAN</div>
                                    <div class="pack_ov_text">{$pck.ov_notice}</div>
                                </div>
                                
                                <div id='tabitinerary' class="tabcontent">
                                    <div id='jqxWidget' style="float: left;">
                                        <div style='margin-top: 10px;' id='itineraryscroll'></div>
                                    </div>
                                    
                                    <table border="1" width="80%" cellpadding="4" cellspacing="4">
                                        {foreach item=iten from=$itinerary}
                                            <tr valign="middle" >
                                                <td width="13%" align="center">
                                                    <div class="pack_iten_calendar">{$cou}</div>
                                                </td>
                                                <td class="pack_ov_text">{$iten.detail}</td>
                                            </tr>

                                            {$cou = $cou + 1}
                                        {/foreach}
                                    </table>
                                    
                                </div>
                                <div id='tabdates' class="tabcontent">
                                    <div class="pack_ov_title">DATES & PRICES</div>
                                    <div class="pack_ov_text">{$pck.da_depdate}</div>

                                    <div class="pack_ov_title">{$pck.da_pricelabel|upper}</div>

                                    <div class="pack_ov_title">TYPE</div>
                                    <div class="pack_ov_text">get type from database</div>

                                    <div class="pack_ov_title">BIAYA TAMBAHAN</div>
                                    <div class="pack_ov_text">{$pck.da_extraprice}</div>
                                </div>
                                <div id='tabtravel' class="tabcontent">
                                    <div class="pack_ov_title">EMBASSY LOCATION</div>
                                    <div class="pack_ov_text">
                                        <table border="0" width="80%" cellspacing="1" cellpadding="1">
                                            <tr class="pack_ov_text">
                                                <td width="10%">Address</td>
                                                <td>{$pck.tr_embaddress}</td>
                                            </tr>
                                            <tr class="pack_ov_text">
                                                <td>Phone</td>
                                                <td>{$pck.tr_embphone}</td>
                                            </tr>
                                            <tr class="pack_ov_text">
                                                <td>Fax</td>
                                                <td>{$pck.tr_embfax}</td>
                                            </tr>
                                        </table>
                                    </div>

                                    <div class="pack_ov_title">VISA PRICES & PROCEDURES</div>
                                    <div class="pack_ov_text">get type from database</div>

                                    <div class="pack_ov_title">PROCESSING REQUIREMENTS</div>
                                    <div class="pack_ov_text">{$pck.tr_requirement}</div>

                                    <div class="pack_ov_title">NOTES</div>
                                    <div class="pack_ov_text">{$pck.tr_notes}</div>
                                </div>
                                <div id='tabquestion' class="tabcontent">
                                    <h3>Ask Question</h3>
                                    <p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
                                </div>


                            </div>
                        </div>

                    </td>
                </tr>
            </table>

            <div id="footer-spacer"></div>
        </div>

        {include file='footer.tpl'}

    </body>
</html>